<template>
	<div class="messageBox" >
		<h2>{{title}}</h2>
		<p>{{content}}</p>
		<div>
			<div v-if="cancel" @click="handleCancel">{{cancel}}</div>
			<div v-if="ok" @click="handleOk">{{ok}}</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
	
	.messageBox{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -100px;
		margin-top: -70px;
		width: 200px;
		height: 120px;
		background-color: #fff;
		border: 1px solid #C9C9C9;
		border-radius: 3px;
		box-shadow: 2px 0 3px 3px #ccc;
		animation: tata 0.2s;
	}
	@keyframes tata{
		0%{
			transform: scale(1);
		}
		66%{
			transform: scale(0.8);
		}
		100%{
			transform: scale(1);
		}
	}
	.messageBox>h2{
		font-size: 18px;
		line-height: 40px;
		color: #333333;
		text-align: center;
	}
	.messageBox>p{
		font-size: 14px;
		color: #333333;
		text-align: center;
		line-height: 40px;
	}
	.messageBox>div{
		display: flex;
		position: absolute;
		bottom: 0;
		width: 100%;
		border-top: 1px solid #333333;
	}
	.messageBox>div div{
		flex: 1;
		text-align: center;
		line-height: 30px;
		border-right: 1px solid #333333;
	}
	.messageBox>div div:last-of-type{
		border: none;
	}
</style>
